<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<title>引导页</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/boxgrid/css/default.css" />

		
<!--必要样式-->

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/boxgrid/css/component.css?date=03" />
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
        <script src="${pageContext.request.contextPath}/static/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/modernizr.custom.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/Chart2.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/utils.js"></script> --%>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/Chart.bundle.js"></script> --%>
<style>

		.divcan{width: 17.5%;float:left;}
		canvas{
			display:block;
         	margin:0 auto;
         }
        .divcanfirst{
			margin-left:5%;
		}
		.divcanend{
			margin-right:5%;
		}
		
		.divB{
			display:block;
         	margin:0 auto;
         	height: 8%;

    		margin-left: 40%;
         }
		.tipdiv{
			display: inline-block;
		}
		.tipdiv2{
		    margin-left: 8%;
		}
		.tip{
			color: #756b6b;
		    font-family: 微软雅黑;
		    font-size: 1.5em;
    	}
    	.tipdivtop{
    		 height: 50%;
    	}
    	
    	.tipdivleft{
    		height: 80%;
    		width: 0.3em;
    		
    	}
    	.tipdivright{
    		color: #756b6b;
		    font-family: 微软雅黑;
		    font-size: 1em;
    	}
    	.tipdivright2{
    		color: #756b6b;
		    font-family: 微软雅黑;
		    font-size: 0.7em;
    	}
    	.main1{
    		width: 60%;
	  		padding: 1.875em;
		    margin: 0 auto;
		    margin-bottom: 1%;
/* 		    	padding: 0 1.875em 3.125em 1.875em; */
 		    background: url(${pageContext.request.contextPath}/static/plugins/boxgrid/image/juxing.png); 
		    background-size: 100% 100%;
		    background-repeat: no-repeat;
    }
	    .main2{
	    		width: 60%;
	    		height:7%;
			    margin: 0 auto;
	 		    background-color: #c6e8fd; 
	 		    margin-bottom: 1%
	    }
	    .main2Leftdiv{
	        width: 40%;
		    height: 100%;
		    background-color: #178fff;
		    display:table;
		    overflow:hidden;
		    border: #178fff;
		    font-weight: bold;
		    float: right;
	    }
	    .main2Leftspan{
	    	color: white;
	    	font-size: 2em;
	    }
	    .main2righttspan{
	    	color: #333333;
	    	font-size: 1.2em;
	    	font-weight: bold;
	    }
	    .main2Rightdiv{
	        width: 60%;
		    height: 100%;
		   float: right;
	    }
	    .main2Rightdiv3{
	    	height:100%;
	    	 display:table;
		    overflow:hidden; 
		    float: left;
	    }
	    .main2Rightdiv4{
	    	 display:table;
		    overflow:hidden; 
		    float: left;
	    }
	    .left{
	    	position: fixed;
		    width: 20%;
		    bottom: 10%;
		    text-align: center;
	    }
	    .leftTime{
	    	
	    }
	    .right{
	    	position: fixed;
		    width: 20%;
		    bottom: 10%;
		    right: 0;
		    text-align:center;
		    z-index:9999;
	    }
	    .rightTop{
	    	margin-bottom: 45%;
	    }
	    .time{
	    	color: white;
	    	font-family: 微软雅黑;
	    }
	    .time1{
		    font-size: 2.5em;
		    float: right;
		    margin-right: 10px;
	    }
	    .time2{
		    float: right;
		    margin-right: 1em;
	    }
	    .time2-1{
		    font-size: 1.2em;
	    }
	    .time2-2{
		    font-size: 1.2em;
	    }
    	#vc { display:table;  height: 8%;width: 100%;    margin-top: 5%;overflow:hidden; float: left;}
    	#vc2 { display:table;  height: 8%;width: 60%;    margin-top: 5%;padding-left: 10%;overflow:hidden; float: left;}
		#vci { vertical-align:middle; display:table-cell;text-align:center; _position:absolute; _top:50%; _left:50%; }
		#content {  display:inline-block; _position:relative; _top:-50%; _left:-50%; font-family: 微软雅黑;}
</style>
</head>

<body>
	<div style="position:absolute; width:100%; height:100%;z-index:-1">
		<img id="backimg" alt="" src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/beijing.png;" width="100%">
	</div>
	<div class="left">
		<div class="time">
			<div class="time2">
				<div class="time2-1" id="time2"></div>
				<div class="time2-2" id="time3"></div>
			</div>
			<div class="time1" id="time1"></div>
		</div>
	</div>
	<div class="right">
		<div class="rightTop"><img alt="向下" title="向下" src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/down.png" onclick="down()" style="cursor:pointer"></div>
		<div class="rightDowm"><img alt="退出系统" title="退出系统" src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/tuichu.png" onclick="logout()" style="cursor:pointer"></div>
	</div>
<div class="container" id="container">	
	<div class="main2" id="">
		<div class="main2Rightdiv">
			<div style="float: right;margin-right: 50px;height: 100%;">
				<div  style="height: 100%;">
					<div class="main2Rightdiv3">
						<div id="vci" >
							<div id="content">
								<font class="main2righttspan">${selfname}</font>
							</div>
						</div>
					</div>
				</div>
<!-- 				<div style="height: 40%;"> -->
<!-- 					<div class="main2Rightdiv3"> -->
<!-- 						<div id="vci" > -->
<!-- 							<div id="content"> -->
<!-- 								<font class="main2righttspan">杭州</font> -->
<!-- 							</div> -->
<!-- 						</div> -->
<!-- 					</div> -->
<!-- 				</div> -->
<!-- 				<div  style="height: 10%;"></div> -->
			</div>
		</div>
		<div class="main2Leftdiv">
			<div id="vci">
				<div id="content">
					<font class="main2Leftspan">掌连云信息管理系统</font>
				</div>
			</div>
		</div>
		
	</div>
	<div class="main1" id="pie">
				
			<div class="divcan divcanfirst" id="divcan1">
				<canvas id="canvas" ></canvas>
				<div id="vc">
					<div id="vci">
						<div id="content">
							<font class="tip">住户  </font>
						</div>
					</div>
				</div>
<!-- 				<div id="vc2"> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #3fa8ff;float: left;"> </div> -->
<!-- 						<div class="tipdivright"  id="user1">0</div> -->
<!-- 					</div> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #2380ce;float: left;"> </div> -->
<!-- 						<div class="tipdivright"  id="user2">0</div> -->
<!-- 					</div> -->
<!-- 					<div></div> -->
<!-- 				</div> -->
			</div>
			<div class="divcan">
				<canvas id="canvas2" ></canvas>
				<div id="vc">
					<div id="vci">
						<div id="content">
							<font class="tip">评论  </font>
						</div>
					</div>
				</div>
<!-- 				<div id="vc2"> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #ff9900;float: left;"> </div> -->
<!-- 						<div class="tipdivright"  id="album1">0</div> -->
<!-- 					</div> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #ba6f00;float: left;"> </div> -->
<!-- 						<div class="tipdivright"  id="album2">0</div> -->
<!-- 					</div> -->
<!-- 				</div> -->
			</div>
			<div class="divcan">
				<canvas id="canvas3" ></canvas>
				<div id="vc">
					<div id="vci">
						<div id="content">
							<font class="tip">发帖  </font>
						</div>
					</div>
				</div>
<!-- 				<div id="vc2"> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #0f7cd9;float: left;"></div> -->
<!-- 						<div class="tipdivright"  id="comment1">0</div> -->
<!-- 					</div> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #1250b0;float: left;"></div> -->
<!-- 						<div class="tipdivright"  id="comment2">0</div> -->
<!-- 					</div> -->
<!-- 				</div> -->
			</div>
			<div class="divcan">
				<canvas id="canvas4" ></canvas>
				<div id="vc">
					<div id="vci">
						<div id="content">
							<font class="tip">开门记录</font>
						</div>
					</div>
				</div>
<!-- 				<div id="vc2"> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #f5624d;float: left;"></div> -->
<!-- 						<div class="tipdivright"  id="openlog1">0</div> -->
<!-- 					</div> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #ca301a;float: left;"></div> -->
<!-- 						<div class="tipdivright"  id="openlog2">0</div> -->
<!-- 					</div> -->
<!-- 				</div> -->
			</div>
			<div class="divcan">
				<canvas id="canvas5" ></canvas>
				<div id="vc">
					<div id="vci">
						<div id="content">
							<font class="tip">点赞  </font>
						</div>
					</div>
				</div>
<!-- 				<div id="vc2"> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #21b3ec;float: left;"></div> -->
<!-- 						<div class="tipdivright"  id="like1">0</div> -->
<!-- 					</div> -->
<!-- 					<div class="tipdivtop"> -->
<!-- 						<div class="tipdivleft" style="background-color: #1b67a6;float: left;"></div> -->
<!-- 						<div class="tipdivright"  id="like2">0</div> -->
<!-- 					</div> -->
<!-- 				</div> -->
			</div>
			<div class="" style="position: absolute;right: 23%;">
					<div class="tipdivright2"><span>浅：一周</br>深：全部</span></div>
				</div>
	</div>
	
	
	<div class="main">

		<ul id="rb-grid" class="rb-grid clearfix">
			<c:forEach items="${homemenus}" var="sysmenu" varStatus="status">
				<c:if test="${status.index%9==1 || status.index%9==3 || status.index%9==8}">
					<li class="rb-span-2 zl-rb-${status.index}" onclick="towhere('${pageContext.request.contextPath}${sysmenu.mUrl}','${sysmenu.sid}')">
						<span><img src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/${sysmenu.picName}" alt=""></span><span class="rb-temp rb-grid-span2">${sysmenu.mName}</span>
					</li>
				</c:if>
				<c:if test="${status.index%9!=1 && status.index%9!=3 && status.index%9!=8}">
					<li class="" onclick="towhere('${pageContext.request.contextPath}${sysmenu.mUrl}','${sysmenu.sid}')">
						<span><img src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/${sysmenu.picName}" alt=""></span><span class="rb-temp rb-grid-span">${sysmenu.mName}</span>
					</li>
				</c:if>
			</c:forEach>
			
		</ul>
		
	</div>
</div><!-- /container -->

<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/jquery.fittext.js"></script>

<script type="text/javascript">

	var data = ${dataList};
	switch ('${userRole}') {
	case '1':
	case '2':	
		var userallnum = data[2].COUNTNUM;
		var usernum = data[2].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var albumallnum = data[7].COUNTNUM;//发帖
		var albumnum = data[7].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var commentallnum = data[8].COUNTNUM;//评论
		var commentnum = data[8].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var likeallnum = data[9].COUNTNUM;//点赞
		var likenum = data[9].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var openlogallnum = data[13].COUNTNUM;//开门记录
		var openlognum = data[13].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		
		break;
	case '3':
	case '4':
		var userallnum = data[1].COUNTNUM;
		var usernum = data[1].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var albumallnum = data[6].COUNTNUM;//发帖
		var albumnum = data[6].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var commentallnum = data[7].COUNTNUM;//评论
		var commentnum = data[7].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var likeallnum = data[8].COUNTNUM;//点赞
		var likenum = data[8].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var openlogallnum = data[12].COUNTNUM;//开门记录
		var openlognum = data[12].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;	
		break;
	case '5':
	case '6':
		var userallnum = data[0].COUNTNUM;
		var usernum = data[0].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var albumallnum = data[5].COUNTNUM;//发帖
		var albumnum = data[5].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var commentallnum = data[6].COUNTNUM;//评论
		var commentnum = data[6].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var likeallnum = data[7].COUNTNUM;//点赞
		var likenum = data[7].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;
		var openlogallnum = data[11].COUNTNUM;//开门记录
		var openlognum = data[11].A+data[2].B+data[2].C+data[2].D+data[2].E+data[2].F+data[2].G;	
		break;
	default:
		var userallnum = 1;
		var usernum = 0;
		var albumallnum = 1;//发帖
		var albumnum = 0;
		var commentallnum = 1;//评论
		var commentnum = 0;
		var likeallnum = 1;//点赞
		var likenum = 0;
		var openlogallnum = 1;//开门记录
		var openlognum = 1;	
	break;
		break;
	}
	
	if(userallnum == 0){
		userallnum = 1;
	}
	if(albumallnum == 0){
		albumallnum = 1;
	}
	if(commentallnum == 0){
		commentallnum = 1;
	}
	if(openlogallnum == 0){
		openlogallnum = 1;
	}
	if(likeallnum == 0){
		likeallnum = 1;
	}
	$("#user1").html(usernum);
	$("#user2").html(userallnum);
	$("#album1").html(albumnum);
	$("#album2").html(albumallnum);
	$("#comment1").html(commentnum);	
	$("#comment2").html(commentallnum);
	$("#openlog1").html(openlognum);
	$("#openlog2").html(openlogallnum);
	$("#like1").html(likenum);
	$("#like2").html(likeallnum);

// 	var config = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    usernum,
// 	                    userallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#3fa8ff",
// 						"#2380ce"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	                     "一周",
// 	                     "全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config2 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    commentnum,
// 	                    commentallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#ff9900",
// 						"#ba6f00"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 					"一周",
// 					"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config3 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    albumnum,
// 	                    albumallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#0f7cd9",
// 						"#1250b0"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	 					"一周",
// 						"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config4 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    openlognum,
// 	                    openlogallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#f5624d",
// 						"#ca301a"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	 					"一周",
// 						"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config5 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    likenum,
// 	                    likeallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#21b3ec",
// 						"#1b67a6"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	 					"一周",
// 						"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
	var pieData = [
				{
					value: usernum,
					color:"#3fa8ff",
					label: "一周"
				},
				{
					value : userallnum,
					color : "#2380ce",
					label: "全部"
				}
			
			];
		var pieData2 = [
				{
					value: commentnum,
					color:"#ff9900",
					label: "一周"
				},
				{
					value : commentallnum,
					color : "#ba6f00",
					label: "全部"
				}
			
			];
		var pieData3 = [
				{
					value: albumnum,
					color:"#0f7cd9",
					label: "一周"
				},
				{
					value : albumallnum,
					color : "#1250b0",
					label: "全部"
				}
			
			];
		var pieData4 = [
				{
					value: openlognum,
					color:"#f5624d",
					label: "一周"
				},
				{
					value : openlogallnum,
					color : "#ca301a",
					label: "全部"
				}
			
			];
		var pieData5 = [
				{
					value: likenum,
					color:"#21b3ec",
					label: "一周"
				},
				{
					value : likeallnum,
					color : "#1b67a6",
					label: "全部"
				}
			
			];
	$(window).resize(resizeCanvas);  
	resizeCanvas();
	startTime(); 
	function resizeCanvas() {  
		var width=$(window).get(0).innerWidth/12;
		var height=$(window).get(0).innerHeight/12;
		var length;
		if(parseInt(width)>parseInt(height)) 
		{  
			height = width;
		}else{
			width = height;
		}
	    $("#canvas").attr("width", width);  
		$("#canvas").attr("height", height);  
		$("#canvas2").attr("width", width);  
		$("#canvas2").attr("height", height); 
		$("#canvas3").attr("width", width);  
		$("#canvas3").attr("height", height);
		$("#canvas4").attr("width", width);  
		$("#canvas4").attr("height", height);
		$("#canvas5").attr("width", width);  
		$("#canvas5").attr("height", height);

	   

//		new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);	
//		new Chart(document.getElementById("canvas2").getContext("2d")).Pie(pieData2);	
//		new Chart(document.getElementById("canvas3").getContext("2d")).Pie(pieData3);	
//		new Chart(document.getElementById("canvas4").getContext("2d")).Pie(pieData4);	
//		new Chart(document.getElementById("canvas5").getContext("2d")).Pie(pieData5);
		
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myPie = new Chart(ctx).Pie(pieData);
		var ctx2 = document.getElementById("canvas2").getContext("2d");
		window.myPie2 = new Chart(ctx2).Pie(pieData2);
		var ctx3 = document.getElementById("canvas3").getContext("2d");
		window.myPie3 = new Chart(ctx3).Pie(pieData3);
		var ctx4 = document.getElementById("canvas4").getContext("2d");
		window.myPie4 = new Chart(ctx4).Pie(pieData4);
		var ctx5 = document.getElementById("canvas5").getContext("2d");
		window.myPie5 = new Chart(ctx5).Pie(pieData5);
// 		 var ctx = document.getElementById("canvas").getContext("2d");
// 	        window.myPie = new Chart(ctx, config);
// 		 var ctx = document.getElementById("canvas2").getContext("2d");
// 	        window.myPie2 = new Chart(ctx, config2);
// 		 var ctx = document.getElementById("canvas3").getContext("2d");
// 	        window.myPie3 = new Chart(ctx, config3);
// 		 var ctx = document.getElementById("canvas4").getContext("2d");
// 	        window.myPie4 = new Chart(ctx, config4);
// 		 var ctx = document.getElementById("canvas5").getContext("2d");
// 	        window.myPie5 = new Chart(ctx, config5);
		var pieheight=$("#divcan1").outerHeight()+40;
		$("#pie").attr("style","height:"+pieheight+"px");	
		var containerheight=$("#container").outerHeight()+100;
		$("#backimg").attr("style","height:"+containerheight+"px")
};  

function towhere(url,id){
		if(url==""){
			post('${pageContext.request.contextPath}/admin/defaultIndex.action', {mpid :id});
		}else{
			post(url,{mpid:id});
		}
		
	};

	function startTime() {  
        var today = new Date();  
        var y = today.getFullYear();  
        var M = today.getMonth()+1;  
        var d = today.getDate();  
        var w = today.getDay();  
        var h = today.getHours();  
        var m = today.getMinutes();  
        var s = today.getSeconds();  
        var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];  
        // add a zero in front of numbers<10  
        m = checkTime(m);  
        s = checkTime(s);  
        $('#time1').html(h+':'+m);//可改变格式 
        $('#time2').html(week[w]);
        $('#time3').html(y+'/'+M+'/'+d);
        t = setTimeout(startTime, 30000);  
        function checkTime(i) {  
            if (i < 10) {  
                i = "0" + i;  
            }  
            return i;  
        }  
    }
    function down(){
    	$(document).scrollTop(400);
    }
    var url = "<%=request.getContextPath()%>";
    function logout() {
        window.location.href = url + "/logout";
    }
</script>

</body>
</html>
